<template>
	<view @touchmove.stop.prevent="moveHandle" @catchtouchmove="moveHandle">
		<view class="mask" v-show="showFalg" @click="cancelP"></view>
		<view class="shopCart" :class="{active: showFalg}">
			<view class="preview">
				<view class="previewItem">
					<view class="previewImage">
						<image :src="goodsDetail?.img"></image>
					</view>
					<view class="previewAttr">
						<view class="price"><text>￥</text>{{skuAttr?.price}}</view>
						<view>库存:{{skuAttr?.stock}}</view>
						<view>已选:{{skuAttr.text?.join()}}</view>
					</view>
				</view>
				<view class="iconfont icon-error" @click="cancelP"></view>
			</view>
			<view class="rank" v-for="(attr,index) in attrList" :key="attr.text">
				<view class="rankTitle" > 
					{{attr.text}}
					<text v-if="skuAttr?.text?.includes(attr.text)">请选择{{attr.text}}</text>
				</view>
				<view class="rankContent">
					<view v-for="arrtValue in attr.values" :key="arrtValue.text" :class="{active: skuAttr?.text?.includes(arrtValue.text)}" @click="changeSkuArr(index,arrtValue.text)">
						{{arrtValue.text}}
					</view>	
				</view>
			</view>
			<view class="addNum">
				<text>数量</text>
				<u-number-box :min="1" bg-color="#fff" input-height="40" v-model="addCart.num"></u-number-box>
			</view>
			<view class="btn" @click="definite">确定</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, defineProps, defineEmits,ref, computed, onMounted,nextTick } from 'vue'
import { shopCart, home } from '@/api'
import {  onLoad } from "@dcloudio/uni-app"
import { userStore } from '../../../stores/userInfo/userInfo';
	// 传过来的数据
	let props = defineProps(['goodsDetail','showFalg','params'])
	let emit = defineEmits(['update:showFalg'])
	let addCart = reactive({
		uid: '',
		goods_id:'',
		num: 1,
		attr: '',
		type: ''
	})

	let falg = ref(true)
	let defaultSku = reactive({
		text: [],
		price: '0',
		stock: 0
	})
	// 属性选择
	let skuAttr = reactive({
		text:[],
		price: '0',
		stock: 0
	})
	// 属性列表
	let attrList = computed(() => {
		return props.goodsDetail?.attr
	})
	onLoad(() => {
		setTimeout(()=> {
			defaultSku = props.goodsDetail.default_sku_info
			getSku()
		},400)
	})

	function changeSkuArr(index, value) {
		if(defaultSku.text.includes(value)) return
		defaultSku.text[index] = value
		getSku()
	}
	// 获取属性
	function getSku(){
		let skuParams = {
			goods_id: props.params.goods_id,
			sku: defaultSku.text
		}
		home.reqSku(skuParams).then(res => {
			if(res.code === 1) {
				if(!res.data) {
					skuAttr={
						text: ['暂无属性'],
						price: '0',
						stock: 0
					}
				}else {
					skuAttr.text = res.data.text
					skuAttr.price = res.data.price
					skuAttr.stock = res.data.stock
				}
			}
		})
	}

	// 确定
	function definite(){
		if(skuAttr.text[0] === '暂无属性') return
		addCart.uid = props.params.uid
		addCart.goods_id = props.params.goods_id
		addCart.attr = skuAttr.text
		addCart.type= props.params.type
	
		addShopCart()
	}
	// 取消
	function cancelP() {
		addCart.type = ''
		emit('update:showFalg',false)
	}
	// 添加 购物车
	function addShopCart() {
		shopCart.reqAddShopCart(addCart).then(res =>{
			if(res.code === 1) {
				if(addCart.type=== 'buy') {
					let orderId = encodeURI(JSON.stringify(res.data.id)) 
					emit('update:showFalg')
					 uni.navigateTo({
					 	url: `/pages/order/CreateOrder/CreateOrder?cart_id=${orderId}`
					 })
					return 
				}
				let user = userStore()
				user.changeUpdateShopCart()
				uni.$u.toast('添加成功')
				addCart.num = 1
				emit('update:showFalg')
			}else {
				if(addCart.type) {
					uni.$u.toast('购买失败')
					emit('update:showFalg')
					addCart.num = 1
					return 
				}
				uni.$u.toast('添加失败')
				addCart.num = 1
				emit('update:showFalg')
			}
		})
	}
	// 取消滚动
	function moveHandle(){
		return
	}
</script>

<style lang="scss" scoped>
	.mask{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background:rgba(0, 0, 0,.5);
		z-index: 999;
	}
	.shopCart{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 9999;
		transform: translateY(120%);
		transition: 1s ease;
		.preview{
			padding: 15rpx;
			display: flex;
			justify-content: space-between;
			.previewImage{
				position: relative;
				width: 200rpx;
				height: 140rpx;
				image{
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 200rpx;
				}
			}
			.previewItem{
				display: flex;
				.previewAttr{
					margin-left: 15rpx;
					font-size: 30rpx;
					color: #b2b2b2;
					line-height: 40rpx;
					.price{
						color: red;
						text{
							margin-right: -2rpx;
							font-size: 25rpx;
						}
					}
				}
			}
			.iconfont{
				font-size: 40rpx;
			}
		}
		
		.rank{
			padding: 15rpx;
			.rankTitle{
				font-size: 30rpx;
				color: #b2b2b2;
				margin: 15rpx 0;
				text{
					color: red;
					font-size: 25rpx;
				}
			}
			.rankContent{
				display: flex;
				.active{
					color: #fb526d;
					background-color: #ffedec;
				}
				view{
					font-size: 16rpx;
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
					margin-right: 15rpx;
					color: #323232;
					background-color: #f6f5f5;
				}
			}
		}
		.addNum{
			// 变为flex布局 默认水平排列
			display: flex;
			// 水平两端对齐
			justify-content: space-between;
			// 垂直居中
			align-items: center;
			padding: 15rpx;
			font-size: 22rpx;
			color: #b2b2b2;
		}
		.btn{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			background-color: #fdd100;
			font-weight: 550;
			&:active{
				opacity: 0.5;
			}
		}
		&.active{
			transform: translateY(0%);
			transition: 1s ease;
		}
	}
</style>